<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="./parser.js"></script>
    <script type="text/javascript">

        function onload() {
            console.log("test");
            const html = `
<div @click="handleClick('/>')">
    <h1>Test Title</h1>
    { [1, 2, 3, 4].map( index =>
    <p> Block 1!</p>) } { [1, 2, 3, 4].map( index =>
    <p>Block 2! { [1, 2, 3, 4].map( index =>
        <span>Block 3!</span>) }</p>) }
    <ComponentA @click="HandleClick({name: 'Jack'})" :value="value" checked attr="<ComponentßßB></ComponentB>"></ComponentA>
    <ComponentA.Child @click="HandleClick({name: 'Jack'})" :value="value" checked attr="<ComponentB></ComponentB>">
    </ComponentA>
    </ComponentA.Child>
    <ComponentB>
        @click="HandleClick({name: 'Jack'})" :value="value" checked attr="
        <ComponentB></ComponentB>"
    </ComponentB>
</div>`;
            // parse(html);

            const testHtml = `<div id='testid' @click="handleClick('/>')">
                <h1>Test Title 1</h1>
                <h2>Test Title 2</h2>
            </div>`;
            const root = parse(testHtml);
            console.log(root);
        }

    </script>
</head>

<body onload="onload()">
    <div id='board'></div>
</body>

</html>